<template>
  <div class="MenuFilterTree">
    <el-input
      size="large"
      v-model="filterText"
      placeholder="请输入关键词进行过滤"
      class="filterText"
    />
    <div :key="multipleDevCreateList">
      <el-tree
        ref="treeRef"
        :check-strictly="true"
        class="filter-tree"
        node-key="id"
        @node-click="(e) => store.dispatch('setCreate', e)"
        :current-node-key="multipleDevCreateList"
        :highlight-current="true"
        :data="store.state.leftTree"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
      />
    </div>
  </div>
</template>
  
<script setup name="MenuFilterTree">
import { ref, watch, computed } from 'vue'
import { ElTree } from 'element-plus'
import { onMounted, reactive } from 'vue'
import { useStore } from 'vuex'
const store = useStore()

// 选中父节点时，子节点一起选中/取消
const select = (selection, row) => {
  console.log(selection)
}

// 选择全部
const selectAll = (selection) => {
  console.log(selection)
}
// 选择全部
const handleSelectionChange = (value) => {
  console.log(value)
}


const multipleDevCreateList = ref()
const filterText = ref('')
const treeRef = ref()

const defaultProps = {
  children: 'devicesList',
  label: 'title'
}


watch(filterText, (val) => {
  treeRef.value?.filter(val)
})

watch(() => store.state.leftTree, (val) => {

  if (val && val.length) {
    if (val[0] && val[0].devicesList.length) {
      store.dispatch('setCreate', val[0].devicesList[0])
      multipleDevCreateList.value = val[0].devicesList[0].id
    }
  }
})

const filterNode = (value, data) => {
  if (!value) return true
  return data.title.includes(value)
}

onMounted(() => {
  
})
</script>

<style lang="scss" scoped>
.MenuFilterTree {
  width: 330px;

  padding: 20px 10px 0 20px;
  & > div:nth-child(2) {
    background-color: #0e2326;
    border-radius: 4px;
    padding: 14px;
  }
  .filterText {
    margin-bottom: 26px;
  }
}
</style>

  